{% extends "administrative/base.html" %}

{% block page_link %}
    <script src="../../static/administrative/js/add_meeting_room.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/announcements/css/style.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/public_file/js/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .switch-btn {
            cursor: pointer;
            width: 50px;
            height: 25px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #CFCFCF;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 15px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch-btn:before {
            content: '';
            width: 23px;
            height: 23px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        }
        .switch-btn:checked {
            border-color: #56b0d4;
            box-shadow: #56b0d4 0 0 0 16px inset;
            background-color: #56b0d4;
        }
        .switch-btn:checked:before {
            left: 26px;
        }
        .switch-btn.switch-btn-animbg {
            transition: background-color ease .4s;
        }
        .switch-btn.switch-btn-animbg:before {
            transition: left .3s;
        }
        .switch-btn.switch-btn-animbg:checked {
            box-shadow: #dfdfdf 0 0 0 0 inset;
            background-color: #56b0d4;
            transition: border-color .4s, background-color ease .4s;
        }
        .switch-btn.switch-btn-animbg:checked:before {
            transition: left .3s;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        input{
            padding: 8px 10px 8px 40px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="meeting_room.html" style="color: #0b0b0b;">
                <i class="iconfont icon-xinwen1"></i>
                <span> 会议管理</span> <span> > </span> <a href="add_meeting_room.html"> 新增会议室</a>
            </a>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="add_station" type="button" class="btn btn-default add-station" onclick="meeting_room_content()">保存</button>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 93%;padding: 0 30px 0 15px;overflow: auto;">
        <div style="margin-top: 3%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 会议室名称：</label>
            <input id="room_name" class="form-control section-input" type="text" placeholder=" 会议室名称" style="width: 40%;">
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 可容纳人数：</label>
            <input id="capacity" class="form-control section-input" type="text" placeholder=" 可容纳人数" style="width: 40%;">
        </div>

         <div style="margin-top: 2%;width: 100%;">
              <span style="color: red;">*</span>
            <label> 会议室地址：</label>
            <input id="room_site" class="form-control section-input" type="text" placeholder=" 会议室地址" style="width: 40%;">
        </div>

         <div style="margin-top: 2%;width: 100%;">
             <span style="color: red;">&nbsp&nbsp</span>
            <label> 会议室配置：</label>
            <input id="room_configure" class="form-control section-input" type="text" placeholder=" 会议室配置" style="width: 40%;">
        </div>



        <div style="margin-top: 2%;width: 100%;">
           <span style="color: red;">&nbsp&nbsp</span>
            <label style="vertical-align: top;"> 备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注：</label>
             <textarea name="marks" id="marks" cols="30" rows="5" style="width: 40%;border-color: #cfcfcf;border-radius: 7px;"></textarea>
        </div>


        <div style="height: 50px;">

        </div>
    </div>
{% endblock %}




{% block script %}
    <script>
        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }
    </script>
{% endblock %}
